<template>
  <div>
    <h3>我的粉丝</h3>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="$router.push(`/otherHome/passages/${item.id}`)">
        <div class="avatar">
          <img :src="item.avatarUrl" alt="">
        </div>
        <div class="info">
          <div class="name">{{ item.nickname }}</div>
          <div class="sign">{{ item.sign }}</div>
        </div>
      </li>
      <li v-if="!list.length">- 暂无粉丝 - </li>
    </ul>
  </div>
</template>

<script setup>
import { reqGetFollowerList } from '@/apis/user';
import userStore from '@/stores/modules/user';
import { ref, onMounted } from 'vue'
const list = ref([])

onMounted(() => {
  getFollow()
})

const getFollow = async () => {
  const res = await reqGetFollowerList(userStore().userId)
  list.value = res.data
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: .3333rem;
  font-weight: 600;
  margin: .35rem;
}

ul {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .35rem 0;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .1667rem;
    width: 30%;
    margin: .35rem 0;

    .avatar {
      width: 1rem;
      height: 1rem;
      background-color: #ccc;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
      }
    }

    .info {
      width: 2rem;
      text-align: left;
      cursor: pointer;

      .name {
        font-size: .27rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: .1667rem 0;
      }

      .sign {
        font-size: .25rem;
        color: #999;
      }
    }
  }
}
</style>